<template>
	<view class="page">
		<!-- 顶部导航栏 -->
		<view class="topbar safe-area-top">
			<text class="title elderly-text-large">生活圈</text>
			<view class="topbar-actions">
				<view class="action-btn elderly-pressable" @tap="handleVideoCall">
					<text class="action-icon">📹</text>
					<text class="action-label">视频通话</text>
				</view>
				<view class="action-btn elderly-pressable" @tap="handlePublish">
					<text class="action-icon">✏️</text>
					<text class="action-label">发布动态</text>
				</view>
			</view>
		</view>

		<!-- 主要内容区域 -->
		<scroll-view 
			class="main-content" 
			scroll-y 
			:refresher-enabled="true"
			:refresher-triggered="refreshing"
			@refresherrefresh="handleRefresh"
		>
			<!-- 我的状态卡片 -->
			<view class="my-status-card fade-in">
				<view class="user-info">
					<image class="avatar" :src="userInfo.avatar" />
					<view class="user-details">
						<text class="user-name elderly-text-large">{{userInfo.name}}</text>
						<text class="user-mood elderly-text">{{userInfo.mood || '今天心情不错~'}}</text>
					</view>
				</view>
				<view class="quick-actions">
					<view class="quick-btn elderly-pressable" @tap="handlePublish">
						<text class="btn-icon">📝</text>
						<text class="btn-text elderly-text">写心情</text>
					</view>
					<view class="quick-btn elderly-pressable" @tap="handleUploadPhoto">
						<text class="btn-icon">📷</text>
						<text class="btn-text elderly-text">发照片</text>
					</view>
				</view>
			</view>

			<!-- 动态列表 -->
			<view class="moments-list">
				<view 
					class="moment-card interactive slide-up" 
					v-for="(moment, index) in momentsList" 
					:key="moment.id"
					:style="{ animationDelay: (index * 0.1) + 's' }"
				>
					<!-- 用户信息 -->
					<view class="moment-header">
						<image class="moment-avatar" :src="moment.user.avatar" />
						<view class="moment-user-info">
							<text class="moment-user-name elderly-text">{{moment.user.name}}</text>
							<text class="moment-time elderly-text">{{moment.time}}</text>
						</view>
						<view class="moment-actions">
							<view class="action-icon elderly-pressable" @tap="handleLike(moment)">
								<text class="icon">{{moment.isLiked ? '❤️' : '🤍'}}</text>
								<text class="count elderly-text" v-if="moment.likes > 0">{{moment.likes}}</text>
							</view>
							<view class="action-icon elderly-pressable" @tap="handleComment(moment)">
								<text class="icon">💬</text>
								<text class="count elderly-text" v-if="moment.comments > 0">{{moment.comments}}</text>
							</view>
						</view>
					</view>

					<!-- 动态内容 -->
					<view class="moment-content">
						<text class="moment-text elderly-text" v-if="moment.text">{{moment.text}}</text>
						
						<!-- 图片网格 -->
						<view class="moment-images" v-if="moment.images && moment.images.length > 0">
							<view 
								class="image-item elderly-pressable" 
								v-for="(image, imgIndex) in moment.images" 
								:key="imgIndex"
								@tap="previewImage(image, moment.images)"
							>
								<image class="moment-image" :src="image" mode="aspectFill" />
							</view>
						</view>

						<!-- 视频 -->
						<view class="moment-video" v-if="moment.video">
							<video 
								class="video-player" 
								:src="moment.video" 
								controls 
								:poster="moment.videoPoster"
							></video>
						</view>
					</view>

					<!-- 评论区域 -->
					<view class="moment-comments" v-if="moment.commentList && moment.commentList.length > 0">
						<view 
							class="comment-item" 
							v-for="comment in moment.commentList" 
							:key="comment.id"
						>
							<text class="comment-user elderly-text">{{comment.userName}}</text>
							<text class="comment-text elderly-text">：{{comment.content}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 加载更多 -->
			<view class="load-more" v-if="loading">
				<text class="loading-text elderly-text">加载中...</text>
			</view>
		</scroll-view>

		<!-- 发布动态弹窗 -->
		<view class="publish-modal" v-if="showPublishModal">
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title elderly-text-large">发布动态</text>
					<view class="close-btn elderly-pressable" @tap="closePublishModal">
						<text class="close-icon">✕</text>
					</view>
				</view>
				<view class="modal-body">
					<textarea 
						class="publish-textarea" 
						v-model="publishContent" 
						placeholder="分享您的心情..."
						placeholder-class="placeholder"
					></textarea>
					<view class="media-options">
						<view class="media-btn elderly-pressable" @tap="selectImage">
							<text class="media-icon">📷</text>
							<text class="media-text elderly-text">照片</text>
						</view>
						<view class="media-btn elderly-pressable" @tap="selectVideo">
							<text class="media-icon">🎥</text>
							<text class="media-text elderly-text">视频</text>
						</view>
					</view>
				</view>
				<view class="modal-footer">
					<button class="publish-btn elderly-button" @tap="publishMoment">发布</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { storageManager } from '@/utils/storage-simple.js'
import { hapticLight, playSfx } from '@/utils/interaction.js'

export default {
	data() {
		return {
			refreshing: false,
			loading: false,
			showPublishModal: false,
			publishContent: '',
			
			// 用户信息
			userInfo: {
				name: '张爷爷',
				avatar: '/static/user-avatar.svg',
				mood: '今天心情不错~'
			},
			
			// 动态列表
			momentsList: [
				{
					id: 1,
					user: {
						name: '李奶奶',
						avatar: '/static/avatar1.svg'
					},
					time: '2小时前',
					text: '今天在公园练太极，感觉身体越来越好了！',
					images: [
						'https://via.placeholder.com/300x200',
						'https://via.placeholder.com/300x200'
					],
					likes: 8,
					comments: 3,
					isLiked: false,
					commentList: [
						{ id: 1, userName: '王大爷', content: '真棒！我也要开始锻炼了' },
						{ id: 2, userName: '张奶奶', content: '身体是革命的本钱，加油！' }
					]
				},
				{
					id: 2,
					user: {
						name: '王大爷',
						avatar: '/static/avatar2.svg'
					},
					time: '5小时前',
					text: '孙子今天来看我了，还给我买了新手机，教我怎么用微信视频通话，太开心了！',
					images: [
						'https://via.placeholder.com/300x200'
					],
					likes: 12,
					comments: 5,
					isLiked: true,
					commentList: [
						{ id: 3, userName: '李奶奶', content: '真幸福！' },
						{ id: 4, userName: '张爷爷', content: '孩子们真孝顺' }
					]
				},
				{
					id: 3,
					user: {
						name: '张奶奶',
						avatar: '/static/avatar3.svg'
					},
					time: '1天前',
					text: '今天学会了用这个银铃助老小程序，功能真多，生活方便多了！',
					images: [],
					likes: 15,
					comments: 8,
					isLiked: false,
					commentList: [
						{ id: 5, userName: '王大爷', content: '我也在用，确实很方便' },
						{ id: 6, userName: '李奶奶', content: '科技改变生活' }
					]
				}
			]
		}
	},
	
	onLoad() {
		this.loadMoments()
	},
	
	methods: {
		// 加载动态
		async loadMoments() {
			this.loading = true
			// 模拟加载数据
			setTimeout(() => {
				this.loading = false
			}, 1000)
		},
		
		// 下拉刷新
		async handleRefresh() {
			this.refreshing = true
			hapticLight()
			await this.loadMoments()
			this.refreshing = false
			uni.showToast({
				title: '刷新成功',
				icon: 'success'
			})
		},
		
		// 视频通话
		handleVideoCall() {
			hapticLight()
			uni.showActionSheet({
				itemList: ['呼叫儿子', '呼叫女儿', '呼叫好友'],
				success: (res) => {
					const contacts = ['儿子', '女儿', '好友']
					uni.showToast({
						title: `正在呼叫${contacts[res.tapIndex]}`,
						icon: 'none'
					})
					// 这里可以集成真实的视频通话功能
				}
			})
		},
		
		// 发布动态
		handlePublish() {
			hapticLight()
			this.showPublishModal = true
		},
		
		// 上传照片
		handleUploadPhoto() {
			hapticLight()
			uni.chooseImage({
				count: 9,
				success: (res) => {
					this.publishContent = '分享一张照片'
					this.showPublishModal = true
				}
			})
		},
		
		// 点赞
		handleLike(moment) {
			hapticLight()
			moment.isLiked = !moment.isLiked
			moment.likes += moment.isLiked ? 1 : -1
			playSfx('like')
		},
		
		// 评论
		handleComment(moment) {
			hapticLight()
			uni.showModal({
				title: '添加评论',
				editable: true,
				placeholderText: '说点什么...',
				success: (res) => {
					if (res.confirm && res.content) {
						const newComment = {
							id: Date.now(),
							userName: this.userInfo.name,
							content: res.content
						}
						if (!moment.commentList) {
							moment.commentList = []
						}
						moment.commentList.push(newComment)
						moment.comments += 1
					}
				}
			})
		},
		
		// 预览图片
		previewImage(current, urls) {
			uni.previewImage({
				current: current,
				urls: urls
			})
		},
		
		// 选择图片
		selectImage() {
			uni.chooseImage({
				count: 9,
				success: (res) => {
					console.log('选择的图片:', res.tempFilePaths)
				}
			})
		},
		
		// 选择视频
		selectVideo() {
			uni.chooseVideo({
				success: (res) => {
					console.log('选择的视频:', res.tempFilePath)
				}
			})
		},
		
		// 发布动态
		publishMoment() {
			if (!this.publishContent.trim()) {
				uni.showToast({
					title: '请输入内容',
					icon: 'none'
				})
				return
			}
			
			const newMoment = {
				id: Date.now(),
				user: {
					name: this.userInfo.name,
					avatar: this.userInfo.avatar
				},
				time: '刚刚',
				text: this.publishContent,
				images: [],
				likes: 0,
				comments: 0,
				isLiked: false,
				commentList: []
			}
			
			this.momentsList.unshift(newMoment)
			this.closePublishModal()
			
			uni.showToast({
				title: '发布成功',
				icon: 'success'
			})
		},
		
		// 关闭发布弹窗
		closePublishModal() {
			this.showPublishModal = false
			this.publishContent = ''
		}
	}
}
</script>

<style scoped lang="scss">
.page {
	min-height: 100vh;
	background: $theme-bg;
}

/* 顶部导航栏 */
.topbar {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: $elderly-spacing-base $elderly-spacing-lg;
	background: $theme-card;
	backdrop-filter: blur(20rpx);
	border-bottom: 2rpx solid $elderly-border;
	z-index: 100;
	box-shadow: $elderly-shadow-sm;
}

.title {
	font-size: $elderly-font-xl;
	font-weight: 700;
	color: $elderly-text-primary;
	letter-spacing: 2rpx;
}

.topbar-actions {
	display: flex;
	gap: $elderly-spacing-sm;
}

.action-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: $elderly-spacing-xs;
	min-width: $elderly-touch-sm;
	min-height: $elderly-touch-sm;
}

.action-icon {
	font-size: $elderly-font-lg;
	margin-bottom: 4rpx;
}

.action-label {
	font-size: $elderly-font-xs;
	color: $elderly-text-secondary;
	text-align: center;
}

/* 主要内容区域 */
.main-content {
	height: calc(100vh - 200rpx);
	padding-bottom: 120rpx;
}

/* 我的状态卡片 */
.my-status-card {
	background: $theme-card;
	margin: $elderly-spacing-base;
	border-radius: $elderly-radius-lg;
	padding: $elderly-spacing-lg;
	box-shadow: $elderly-shadow-sm;
}

.user-info {
	display: flex;
	align-items: center;
	margin-bottom: $elderly-spacing-base;
}

.avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 40rpx;
	margin-right: $elderly-spacing-base;
}

.user-details {
	flex: 1;
}

.user-name {
	color: $elderly-text-primary;
	font-weight: 700;
	margin-bottom: 4rpx;
}

.user-mood {
	color: $elderly-text-secondary;
	font-size: $elderly-font-sm;
}

.quick-actions {
	display: flex;
	gap: $elderly-spacing-base;
}

.quick-btn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: $elderly-spacing-base;
	background: $theme-warm-gray;
	border-radius: $elderly-radius-base;
	transition: all 0.2s ease;
}

.quick-btn:hover {
	background: $grad-sunrise;
	transform: translateY(-2rpx);
}

.btn-icon {
	font-size: $elderly-font-lg;
	margin-bottom: 4rpx;
}

.btn-text {
	color: $elderly-text-primary;
	font-size: $elderly-font-sm;
	font-weight: 600;
}

/* 动态列表 */
.moments-list {
	padding: 0 $elderly-spacing-base;
}

.moment-card {
	background: $theme-card;
	margin-bottom: $elderly-spacing-base;
	border-radius: $elderly-radius-lg;
	padding: $elderly-spacing-lg;
	box-shadow: $elderly-shadow-sm;
	transition: all 0.3s ease;
}

.moment-card:hover {
	transform: translateY(-2rpx);
	box-shadow: $elderly-shadow-base;
}

.moment-header {
	display: flex;
	align-items: center;
	margin-bottom: $elderly-spacing-base;
}

.moment-avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 30rpx;
	margin-right: $elderly-spacing-sm;
}

.moment-user-info {
	flex: 1;
}

.moment-user-name {
	color: $elderly-text-primary;
	font-weight: 600;
	margin-bottom: 4rpx;
}

.moment-time {
	color: $elderly-text-secondary;
	font-size: $elderly-font-xs;
}

.moment-actions {
	display: flex;
	gap: $elderly-spacing-base;
}

.action-icon {
	display: flex;
	align-items: center;
	gap: 4rpx;
	padding: $elderly-spacing-xs;
	border-radius: $elderly-radius-base;
	transition: all 0.2s ease;
}

.action-icon:hover {
	background: $theme-warm-gray;
}

.icon {
	font-size: $elderly-font-base;
}

.count {
	color: $elderly-text-secondary;
	font-size: $elderly-font-xs;
}

.moment-content {
	margin-bottom: $elderly-spacing-base;
}

.moment-text {
	color: $elderly-text-primary;
	line-height: 1.6;
	margin-bottom: $elderly-spacing-sm;
}

.moment-images {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: $elderly-spacing-xs;
	margin-bottom: $elderly-spacing-sm;
}

.image-item {
	border-radius: $elderly-radius-base;
	overflow: hidden;
}

.moment-image {
	width: 100%;
	height: 200rpx;
}

.moment-video {
	border-radius: $elderly-radius-base;
	overflow: hidden;
}

.video-player {
	width: 100%;
	height: 400rpx;
}

.moment-comments {
	background: $theme-warm-gray;
	border-radius: $elderly-radius-base;
	padding: $elderly-spacing-sm;
}

.comment-item {
	margin-bottom: $elderly-spacing-xs;
}

.comment-item:last-child {
	margin-bottom: 0;
}

.comment-user {
	color: $theme-orange;
	font-weight: 600;
}

.comment-text {
	color: $elderly-text-primary;
}

/* 发布弹窗 */
.publish-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.modal-content {
	background: $theme-card;
	border-radius: $elderly-radius-lg;
	margin: $elderly-spacing-lg;
	width: 90%;
	max-width: 600rpx;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
}

.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: $elderly-spacing-lg;
	border-bottom: 2rpx solid $elderly-border;
}

.modal-title {
	color: $elderly-text-primary;
	font-weight: 700;
}

.close-btn {
	width: 60rpx;
	height: 60rpx;
	border-radius: 30rpx;
	background: $theme-warm-gray;
	display: flex;
	align-items: center;
	justify-content: center;
}

.close-icon {
	font-size: $elderly-font-lg;
	color: $elderly-text-secondary;
}

.modal-body {
	flex: 1;
	padding: $elderly-spacing-lg;
}

.publish-textarea {
	width: 100%;
	min-height: 200rpx;
	background: $theme-warm-gray;
	border-radius: $elderly-radius-base;
	padding: $elderly-spacing-base;
	font-size: $elderly-font-base;
	color: $elderly-text-primary;
	border: none;
	resize: none;
}

.placeholder {
	color: $elderly-text-secondary;
}

.media-options {
	display: flex;
	gap: $elderly-spacing-base;
	margin-top: $elderly-spacing-base;
}

.media-btn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: $elderly-spacing-base;
	background: $theme-warm-gray;
	border-radius: $elderly-radius-base;
	transition: all 0.2s ease;
}

.media-btn:hover {
	background: $grad-sunrise;
	transform: translateY(-2rpx);
}

.media-icon {
	font-size: $elderly-font-lg;
	margin-bottom: 4rpx;
}

.media-text {
	color: $elderly-text-primary;
	font-size: $elderly-font-sm;
	font-weight: 600;
}

.modal-footer {
	padding: $elderly-spacing-lg;
	border-top: 2rpx solid $elderly-border;
}

.publish-btn {
	width: 100%;
	background: $grad-sunrise;
	color: #FFFFFF;
	border: none;
	border-radius: $elderly-radius-base;
	padding: $elderly-spacing-base;
	font-size: $elderly-font-base;
	font-weight: 600;
}

/* 加载更多 */
.load-more {
	text-align: center;
	padding: $elderly-spacing-lg;
}

.loading-text {
	color: $elderly-text-secondary;
}

/* 安全区域适配 */
.safe-area-top {
	padding-top: env(safe-area-inset-top);
}
</style>

